<script setup lang="ts">
import type { GlobalThemeOverrides } from 'naive-ui'
import { dateZhCN, zhCN } from 'naive-ui'
import { ref, onMounted } from 'vue';
const locale = zhCN
const dateLocale = dateZhCN
// const userAgentInfo = ref('');
//     const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
//     onMounted(() => {
//       userAgentInfo.value = navigator.userAgent;

//       if (!Agents.some(item => userAgentInfo.value.toLowerCase().includes(item.toLowerCase())) &&
//         !(window.frameElement && window.frameElement.tagName === "IFRAME")) {
//         const ifrTag = document.createElement('iframe');
//         document.body.innerHTML = '';
//         ifrTag.setAttribute('src', location.href);
//         const styleObj = {
//           width: '390px',
//           height: '844px',
//           position: 'absolute',
//           left: '50%',
//           transform: 'translateX(-50%)',
//         };
//         Object.entries(styleObj).forEach(([key, value]) => {
//           ifrTag.style[key] = value;
//         });
//         document.body.appendChild(ifrTag);
//       }
//     });
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#FE2B54',
    primaryColorHover: '#E55782',
    primaryColorPressed: '#961247',
    infoColor: '#333333',
    modalColor: '#181818',
    fontSizeSmall: '12px',
  },
  Input: {
    color: '#282828',
    border: 'none',
  },
  Button: {
    textColorTertiary: '#C8C8C8',
    paddingSmall: '3px 14px',
  },
  Drawer: {
    bodyPadding: '8px 16px',
    footerPadding: '8px 16px',
    footerBorderTop: '1px solid #444',
    textColor: '#C8C8C8',
  },
  Tabs: {
    tabFontSizeSmall: '12px',
    tabTextColorActiveLine: '#FFFFFF',
    tabTextColorLine: '#999999',
    barColor: '#FFFFFF',
    tabBorderColor: '#333333',
  },
  Checkbox: {
    color: 'transparent',
    borderRadius: '50%',
    textColor: '#999999',
  },
  Message: {
    textColorError: '#E38710',
    color: '#222',
    borderRadius: '8px',
    margin: '35vh 0',
    fontSize: '1.5em',
  },
  Slider: {
    railHeight: '2px',
    railColor: '#444',
  },
}
</script>

<template>
<div class="app">
  
</div>
  <!-- 手指提示 -->
  <Finger />
  <!-- 全屏步骤提示 -->
  <StepTip />

  <n-config-provider
    inline-theme-disabled
    class="wh-full relative"
    :theme="isDark ? null : null"
    :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides"
  >
    <n-message-provider :max="1">
      <router-view />
    </n-message-provider>
  </n-config-provider>
  <audio id="bgPlayer" src="bg-sound.wav" loop />
  <!-- css方式预加载资源 -->
  <div class="proload" />
</template>

<style>
.proload {
  visibility: hidden;
  background-image: url('@/assets/animation/finish.png');
}
.app {
  margin: 0 auto; /* 居中 */
}

/* Styles for screens larger than 768px (adjust as needed) */
@media (min-width: 768px) {
  .app {
    width: 80%; /* 或者设置固定宽度，例如 width: 1200px; */
  }
}
</style>
